<template>
  <div>
    <div class="card">
      <div class="title bold">{{ jobData.job_name }}</div>
      <div class="des">
        <div class="jobDes">
          <el-icon :size="14" class="des-icon">
            <i-ep-Location />
          </el-icon>
          <span>{{ jobData.company_location }}</span>
        </div>
        <div class="jobDes">
          <el-icon :size="14" class="des-icon">
            <i-ep-OfficeBuilding />
          </el-icon>
          <span>{{ jobData.company_cat }}</span>
        </div>
      </div>
      <div class="company">
        <span class="company-name">{{ jobData.company_name }}</span>
        <span class="company-status">{{ jobData.company_scale }}</span>
      </div>
      <div class="hr">
        <img src="@/assets/img/avatar.svg" class="hr-avatar">
        <span>{{ jobData.company_hr }}</span>
      </div>
      <div class="salary">{{ jobData.job_salary }}</div>
    </div>
    <div class="card">
      <div class="title bold">岗位要求</div>
      <div class="jobDetail">
        <div>
          <span v-html="jobData.job_requirement">
          </span>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="title bold">职位描述</div>
      <div>
         <span class="tag" v-for="(item,index) in splitLabels(jobData.job_label)" :key="index">
            {{ item }}
        </span>
      </div>
      <div class="jobDetail" v-html="jobData.job_description"></div>
    </div>
    <div class="submit">
     <el-button @click="showDrawer" type="primary" round size="large">投递简历</el-button>
</div>
<!-- 抽屉组件 -->
<el-drawer v-model="drawer" :with-header="false" direction="btt">
    <div class="vitaeList" v-for="item in vitaeData" :key="item.cid" @click="sendVitae(jobData.rid, item.cid)">
        <el-icon :size="16" class="vitaeListIcon"><i-ep-DocumentAdd /></el-icon>
        {{ item.job_name }}
     </div>
</el-drawer>
  </div>
</template>
<script setup>
import { watch, inject, ref } from 'vue'
import { useRouter } from 'vue-router';
import checkLoginStatus from '@/hooks/checkLoginStatus.js'
import login from '@/hooks/login.js'
const router = useRouter()
const $axios = inject('$axios')
const $root = inject('$root')
const drawer = ref(false)
const vitaeData = ref ([])
let jobData = ref({})
//获取简历详情
const getJobDetails = () => {
  let rid = router.currentRoute.value.params.id
  $axios.get($root + `/recruit/${rid}/`).then(
   r => {
      if (r.data.code == 200) {
        console.log(r.data.data)
        jobData.value = r.data.data
        //使用正则替换换行符号
        jobData.value.job_requirement = jobData.value.job_requirement.replace(/(\r\n)|(\n)/g,'<br>')
        jobData.value.job_description = jobData.value.job_description.replace(/(\r\n)|(\n)/g,'<br>')
      }
    }
  )
}
getJobDetails()
/* 分割工作标签 */
const splitLabels = (str)=>{
  if(str){
     return str.split(';')//返回数组
}
  }

  const showDrawer = ()=>{
    checkLoginStatus(getVitaeData,login)
  }

  const getVitaeData = ()=>{
    $axios.get($root=+`/curri/`).then(r=>{
      if(r.data.code==200){
        console.log(r)
        vitaeData.value = r.data.data
        drawer.value = true
      }
    })
  }
  const sendVitae = (rid,cid)=>{
    $axios.post($root+`/postresume/`,{
      "rid":rid,
      "cid":cid
    })
    .then(r=>{
      if(r.data.code==200){
        ElMessage({
          message:'简历投递成功',
          type:'success',
        })
      }
      else{
        ElMessage.error('简历投递失败')
      }
      drawer.value = false
    })
  }
  //  侦听组件重新加载情况
  watch(() => router.currentRoute.value.name, (name) => {
  if (name == "jobDetail") {
    getJobDetails()
  }
}, { immediate: true,deep:true })
 
</script>
<style scoped>
.vitaeList {
  height: 40px;
  border-bottom: 1px dashed #d7d7d7;
  color: #999;
  line-height: 40px;
}
.vitaeListIcon {
  position: relative;
  top: 2px;
  margin-right: 2px;
}
</style>